<template>
    <view>
        <view class="login-box">
            <view class="login-phone">
                <view style="width:22rpx;height:32rpx">
                    <img :src="img_base_url + '/SysImg/img_icon/shouji-2.png'" alt="" style="width:100%;height:100%">
                </view>
                <view style="width:65%;height:32rpx;margin-left:21rpx">
                    <input type="text" v-model="phone" placeholder="手机号" placeholder-style="color:#C5C5C5;font-size:28rpx" style="width:100%;height:100%;font-size:28rpx">
                </view>
                <view class="get-code" @tap="getLoginCode">{{text == '重新获取' ? text + s + 's': text}}</view>
            </view>
            <view class="login-code">
                <view style="width:22rpx;height:32rpx">
                    <img :src="img_base_url + '/SysImg/img_icon/yanzhengma.png'" alt="" style="width:100%;height:100%">
                </view>
                <view style="width:70%;height:32rpx;margin-left:21rpx">
                    <input type="text" v-model="code" placeholder="验证码" placeholder-style="color:#C5C5C5;font-size:28rpx" style="width:100%;height:100%;font-size:28rpx">
                </view>
            </view>
            <view class="login-button" @tap="loginByPhone">登陆</view>
        </view>
    </view>
</template>

<script>
import { config } from '../../common/utils/congfig'
import { UserModel } from '../../model/user'
const userModel = new UserModel()
export default {
    data() {
        return {
            img_base_url: config.img_base_url,
            phone: '',
            code: '',
            text: '获取验证码',
            s: '',
            setTime: null,
            loginCode: ''
        }
    },
    methods: {
        setInterValFunc() {
            let that = this
			this.setTime = setInterval(function() {
                that.s -= 1;
            }, 1000);
            console.log(this.setTime);
        },
        getLoginCode() {
            if(!(/^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2,5,6,7]|17[0-8]|18[0-9]|19[1,3,5,8,9])\d{8}$/).test(this.phone)) {
                uni.showToast({
                    title: '请输入正确的手机号码',
                    icon: 'none'
                });
            }else {
                if(this.text == '获取验证码') {
                    let data = {
                        Phone: this.phone
                    }
                    userModel.getLoginCode(data).then((res)=>{
                        console.log(res)
                        if(res.StatusCode == 1) {
                            this.loginCode = parseInt(res.Data)
                            console.log(this.loginCode)
                            uni.showToast({
                                title: res.Message,
                                icon: 'none'
                            })
                            this.text = '重新获取'
                            this.s = 60;
                            this.setInterValFunc();
                        }
                    })
                }
            }
        },
        loginByPhone() {
            if(!(/^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2,5,6,7]|17[0-8]|18[0-9]|19[1,3,5,8,9])\d{8}$/).test(this.phone)) {
                uni.showToast({
                    title: '请输入正确的手机号码',
                    icon: 'none'
                });
            }else if(this.code != this.loginCode) {
                uni.showToast({
                    title: '请输入正确的验证码',
                    icon: 'none'
                });
            }else {
                let data = {
                    Phone: this.phone,
                    ValidateCode: this.code
                }
                userModel.loginByPhone(data).then((res) => {
                    console.log(res)
                    if(res.StatusCode == 1) {
                        uni.setStorageSync('userInfo', JSON.stringify(res.Data))
                        uni.showToast({
                            title: res.Message,
                            icon: 'none'
                        })
                        uni.switchTab({
                            url: '/pages/index/index'
                        })
                    }else {
                        uni.redirectTo({
                            urL: '/pages/login/login'
                        })
                    }
                })
            }
        }
    },
    watch: {
        's': {
            deep: true,
            handler(newV, oldV) {
                if(newV == 0) {
                    this.text = '获取验证码';
                    clearInterval(this.setTime);
                }
            }
        }
    }
}
</script>

<style>
    page {
        background: #ffffff;
        overflow: hidden;
    }
    .login-box {
        margin: 130rpx 25rpx 0 77rpx;
    }
    .login-phone,
    .login-code {
        display: flex;
        justify-content: left;
        height: 52rpx;
        border-bottom: 1rpx solid #F0F0F0;
        padding: 0rpx 25rpx 0 16rpx;
    }
    .login-code {
        margin-top: 73rpx;
    }
    .get-code {
        color: #24C79C;
        font-size: 28rpx;
    }
    .login-button {
        width: 539rpx;
        height: 69rpx;
        background:rgba(36,199,156,1);
        border-radius: 35rpx;
        margin: 144rpx auto 0;
        color: #ffffff;
        font-size: 28rpx;
        text-align: center;
        line-height: 68rpx;
    }
</style>